<template>
  <div class="user">
    <n-form label-placement="left" :model="formData">
      <n-row :gutter="24">
        <n-col :span="4">
          <n-form-item label="用户名">
            <n-input
                placeholder="用户名"
                v-model:value="formData.username"
            ></n-input>
          </n-form-item>
        </n-col>
        <n-col :span="4">
          <n-form-item label="昵称">
            <n-input
                placeholder="昵称"
                v-model:value="formData.nick_name"
            ></n-input>
          </n-form-item>
        </n-col>
        <n-col :span="4">
          <n-form-item label="手机号">
            <n-input
                placeholder="手机号"
                v-model:value="formData.user_phone"
            ></n-input>
          </n-form-item>
        </n-col>
        <n-col :span="4">
          <n-form-item>
            <n-space>
              <n-button type="info" @click="handleSearch">查询</n-button>
              <n-button type="default" @click="handleReset">重置</n-button>
            </n-space>
          </n-form-item>
        </n-col>
      </n-row>
    </n-form>
    <n-space>
      <n-button type="info" @click="handleAdd">添加</n-button>
    </n-space>
    <br/>
    <n-data-table
        size="small"
        :pagination="pagination"
        :row-key="rowKey"
        :data="list"
        :columns="columns"
        remote
    ></n-data-table>
    <UserModal ref="modal" @list="getList"></UserModal>
  </div>
</template>

<script lang="ts">
export default {
  name: "user"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, h, ref} from "vue"
import {ums_user_delete, ums_user_list} from '@/api/ums'
import useSystem from '@/hooks/useSystem'
import {userListColumns, UserListType, UserQueryType} from '@/view/system/user/UserTypes'
import UserListOperate from '@/view/system/user/UserListOperate.vue'
import UserModal from '@/view/system/user/UserModal.vue'

const modal = ref<{
  init: (data?:UserListType) => void
}>()

const {pagination, list, success, error} = useSystem<UserListType[]>(getList)

const rowKey = (row) => row.id

const formData = reactive<UserQueryType>({
  username: '',
  nick_name: '',
  user_phone: ''
})

const handleSearch = () => {
  pagination.page = 1
  getList()
}

const handleReset = () => {
  let key: keyof UserQueryType
  for (key in formData) {
    formData[key] = ''
  }
  pagination.page = 1
  getList()
}

const handleAdd = () => {
  modal.value?.init()
}

const columns = [].concat(userListColumns,[{
  title: "操作",
  key: "id",
  align: 'center',
  width: 160,
  render(row:UserListType) {
    return h(UserListOperate,{
      onEdit () {
        modal.value?.init(row)
      },
      onDelete () {
        ums_user_delete({
          id: row.id
        }).then(res => {
          if (res.code === 200) {
            success(res.message)
            getList()
          }else {
            error(res.message)
          }
        })
      }
    })
  }
}])

function getList () {
  ums_user_list({
    current: pagination.page,
    pageSize: pagination.pageSize,
    data: formData
  }).then(res => {
    pagination.itemCount = res.data.total
    pagination.pageSize = res.data.pageSize
    pagination.page = res.data.current
    list.value = res.data.list
  })
}

onMounted( () => {
  getList()
})
</script>

<style scoped lang="scss">

</style>
